import React, { Component } from "react";
import { Carousel, Tabs, Toast, Accordion, List } from "antd-mobile";
import Imgs from "../../assets/images/index-top.png";
import "./NewDetail.scss";
import { withRouter } from "react-router-dom";
import axios from "axios";
import { connect } from "react-redux";

class NewDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datas: [],
      xq: [],
      isCollect: false,
      isShow: false,
      cxShow: false,
      names: "小雏菊",
      num: 1,
      products: [],
      text: "",
    };
  }
  componentDidMount() {
    axios.get("./json/Details.json").then((res) => {
      Toast.loading("Loading...", 1, null);
      let d = res.data.data;
      // 定义一个新的数组接收内容
      let newObj = [];
      d.map((v) => {
        if (this.props.match.params.id === v.skuInfo.itemId) {
          let arr = [];
          arr.push(v);
          arr.map((it) => {
            let products = it.skuInfo.skus;
            // 获取选择数据
            let text = it.skuInfo.styleKey + it.skuInfo.sizeKey;
            //   获取图文参数
            let list = Object.keys(it.itemParams.info.set).map((item) => ({
              key: item,
              value: it.itemParams.info.set[item],
            }));
            this.setState({ xq: list, products, text });
          });
          this.setState({ datas: arr, canshu: newObj });
        }
      });
    });
    Toast.hide();
  }
  //设置颜色
  getColor = (e) => {
    let names = e.target.getAttribute("data-names");
    this.setState({ names });
  };
  //收藏
  collectClick = () => {
    this.setState({
      isCollect: !this.state.isCollect,
    });
    if (!this.state.isCollect) {
      Toast.info("收藏成功", 1);
    } else {
      Toast.info("取消成功", 1);
    }
  };
  //显示隐藏
  hangdClick = () => {
    let isShow = !this.state.isShow;
    this.setState({ isShow});
  };
  cxClick = () => {
    let cxShow = !this.state.cxShow;
    this.setState({ cxShow });
  };
  // 跳转 前往查看
  goToView = () => {
    this.props.history.push('/download')
  };
  // 加
  subClick = (i) => {
    if (this.state.num <= 1) {
      this.setState({ num: 1 });
    } else {
      this.setState({ num: this.state.num + i });
    }
  };
  // 减
  addClick = (i) => {
    this.setState({ num: this.state.num + i });
  };
  // 存入数据
  goBy = () => {
    localStorage.setItem("sj", JSON.stringify(this.state.products));
  };
  //跳转店铺
  goDp = () => {
    Toast.info("暂未开放,敬请期待", 1);
  };
  // 跳转聊天
  goTalk = () => {
    this.props.history.push("/weChat/2");
  };
  //保存数据
  bctextClick = () => {
    this.setState({ text: this.state.names, isShow: false });
  };
  // 减
  subClick=(i)=>{
   if(this.state.num<=1){
     this.setState({num:1})
   }else{
    this.setState({num:this.state.num+i})
   }
  }
  // 加
  addClick=(i)=>{
    this.setState({num:this.state.num+i})
  }
  // 促销隐藏
  gbClick=()=>{
    this.setState({cxShow:false})
  }
  goBy=()=>{
    let arr=[]
    if( localStorage.getItem('carts')){
      arr = JSON.parse(localStorage.getItem('carts'))
    }
    let item = this.state.datas[0]
    let obj = {
      // id:,
      title:item.normalShareInfo.title, //商品名称
      OriginalPrice:item.priceInfo.nowPrice, //原本价格
      FavorablePrice:item.priceInfo.oldPrice ,//优惠价格
      goodsNum:1, //数量
      goodsstyle:item.normalShareInfo.title, //款式，
      goodscolour:this.state.products[0].style,
      checked:false,//是否被选中
      imgUrl:item.topImages[0],
  }
  arr.push(obj)

    localStorage.setItem('carts',JSON.stringify(arr))
  }
  render() {
    return (
      <div className="mgj-details">
        {/*顶部开始 */}
        <div className="details-mall-notificationBar">
          <div className="notificationBar-left">
            <img src={Imgs} alt="" />
            <div className="notificationBar-text">
              <p className="text1">蘑菇街 总有高手帮你挑</p>
              <div className="text2">
                <i className="iconfont icon-xingxing"></i>
                <i className="iconfont icon-xingxing"></i>
                <i className="iconfont icon-xingxing"></i>
                <i className="iconfont icon-xingxing"></i>
                <i className="iconfont icon-xingxing"></i>
                <span>超过2亿用户已下载</span>
              </div>
            </div>
          </div>
          <div className="notificationBar-right" onClick={this.goToView}>
            前往查看
          </div>
        </div>
        {/* 顶部结束 */}
        {/* 商品详情部分开始 */}
        <div className="details-view">
          {this.state.datas.map((item, index) => {
            return (
              <div key={index}>
                {/* 返回和购物车按钮开始 */}
                <div className="view-top">
                  <i
                    className="iconfont icon-icon"
                    onClick={() => {
                      this.props.history.go(-1);
                    }}
                  ></i>
                  <i className="iconfont icon-gouwuche1" onClick={
                    ()=>{
                      this.props.history.push('/my/cart')
                    }
                  }></i>
                </div>
                {/* 返回和购物车按钮结束 */}
                {/* 商品轮播图开始 */}
                <div className="view-imgs imgss">
                  <Carousel autoplay={true} dots={false} infinite>
                    {item.topImages.map((val) => (
                      <div
                        key={val}
                        style={{
                          display: "inline-block",
                          width: "100%",
                          height: this.state.imgHeight,
                        }}
                      >
                        <img
                          src={val}
                          alt=""
                          style={{ width: "100%", verticalAlign: "top" }}
                          onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event("resize"));
                            this.setState({ imgHeight: "auto" });
                          }}
                        />
                      </div>
                    ))}
                  </Carousel>
                </div>
                {/* 商品轮播图结束 */}
                {/* 商品价格开始 */}
                <div className="view-price">
                  <div className="price-now">
                    <span>￥</span>
                    <span className="now1">{item.priceInfo.nowPrice}</span>
                  </div>
                  <div className="price-old">
                    <div className="price-old--price">
                      ¥{item.priceInfo.oldPrice}
                    </div>
                    <div className="price-old--tags">优惠价</div>
                  </div>
                </div>
                {/* 商品价格结束 */}
                {/* 商品描述开始 */}
                <div className="view-text">
                  <p>{item.normalShareInfo.title}</p>
                  <div className="view-help">
                    <i></i>
                    <span>帮我选</span>
                  </div>
                </div>
                {/* 商品描述结束 */}
                {/* 快递开始 */}
                <div className="view-kd">免邮费</div>
                {/* 快递结束 */}
                {/* 促销满减开始 */}
                {item.outerPromotions.map((v, i) => {
                  return (
                    <div className="view-cx" key={i}>
                      <div className="cx-title">促销</div>
                      <div className="cx-con">
                        <span className="cx-con1">{v.title}</span>
                        <span className="cx-con2">{v.content}</span>
                      </div>
                      <div className="cx-btn">
                        <span>更多</span>
                        <i
                          className="iconfont icon-xiangyoujiantou"
                          onClick={this.cxClick}
                        ></i>
                      </div>
                    </div>
                  );
                })}
                {
                  <div
                    className="cx-content"
                    style={{ display: this.state.cxShow ? "block" : "none" }}
                  >
                    <div className="cx-top1">
                      {item.popoverPromotions.title}
                    </div>
                    <ul>
                      {item.popoverPromotions.list.map((j, index) => {
                        return (
                          <li className="top1-item" key={j.campId}>
                            <p>{j.couponInfo}指定商品享受</p>
                            <span>{j.validTime}</span>
                          </li>
                        );
                      })}
                    </ul>
                    <div className="cx-foo2" onClick={this.gbClick}>完成</div>
                  </div>
                }
                {/* 促销满减结束 */}
                {/* 发货开始 */}
                <div className="view-fh">
                  {this.props.tites.map((j) => {
                    return (
                      <div className="view-fh-item" key={j.id}>
                        <img src={j.img} alt=""></img>
                        <span>{j.title}</span>
                      </div>
                    );
                  })}
                  <i className="iconfont icon-xiangyoujiantou"></i>
                </div>
                {/* 发货结束 */}
                {/* 选择开始 */}
                <div className="view-sele">
                  <span>请选择:{this.state.text}</span>
                  <i
                    className="iconfont icon-xiangyoujiantou"
                    onClick={this.hangdClick}
                  ></i>
                </div>
                {/* 选择结束 */}
                {/* 评价开始 */}
                <div className="view-pj">
                  <div className="pj-top">
                    <div>
                      <span>买家评价</span>|<span>销量评价</span>
                    </div>
                    <i className="iconfont icon-xiangyoujiantou"></i>
                  </div>
                  <div className="pj-tag">
                    {item.rateInfo.rateTags.map((j, i) => {
                      return (
                        <span className="pj-tag-item" key={i}>
                          {j.value}({j.num})
                        </span>
                      );
                    })}
                  </div>
                  <div className="pj-list">
                    {item.rateInfo.list.map((i) => {
                      return (
                        <div className="pj-list-item" key={i.content}>
                          <div className="pj-item-user">
                            <img src={i.user.avatar} alt="" />
                            <span>{i.user.uname}</span>
                          </div>
                          <div className="pj-item-cont">{i.content}</div>
                          <div className="pj-item-times">2020-08-27</div>
                          <div className="pj-item-imgs"></div>
                        </div>
                      );
                    })}
                  </div>
                </div>
                {/* 评价结束 */}
                {/* 店铺开始 */}
                <div className="view-dp">
                  <div className="dp-img">
                    <img src={item.shopInfo.shopLogo} alt="" />
                  </div>
                  <div className="dp-right">
                    <div className="db-left">
                      <div className="right-shop_btn">{item.shopInfo.name}</div>
                      <div className="right-shop__entry">
                        <div className="right-icon--text">进店</div>
                        <i className="iconfont icon-xiangyoujiantou" onClick={this.goDp}></i>
                      </div>
                    </div>
                    <div className="right-shop__title">
                      <div className="tt">
                        <i className="iconfont icon-xingxing"></i>
                        <i className="iconfont icon-xingxing"></i>
                        <i className="iconfont icon-xingxing"></i>
                        <i className="iconfont icon-xingxing"></i>
                        <i className="iconfont icon-xingxing"></i>
                      </div>
                      {"|"}
                      <span>{item.shopInfo.saleDescV2}</span>
                    </div>
                    <div className="right-shop__lab">
                      {item.shopInfo.shopLabels.map((x) => {
                        return (
                          <span className="lab-item" key={x.id}>
                            {x.text}
                          </span>
                        );
                      })}
                    </div>
                  </div>
                </div>
                {/* 店铺结束 */}
                {/* 商品详情开始 */}
                <div className="view-conts">
                  <Tabs tabs={this.props.tabs} tabBarActiveTextColor="#ff5577">
                    <div className="conts-desc">
                      <div className="desc--start"></div>
                      <span>
                        2019春秋季新款百搭基础小白鞋女学生板鞋韩版街拍平底休闲白鞋女鞋
                      </span>
                      <div className="desc--end"></div>
                      {/* 图文详情开始 */}
                      {item.detailInfo.detailImage[0].list &&
                        item.detailInfo.detailImage[0].list.map((v, i) => {
                          return (
                            <div key={i} className="imgTextDetail">
                              <img className="bgImg" src={v} alt="" />
                            </div>
                          );
                        })}
                      {/* 图文详情结束 */}
                    </div>
                    <div className="conts-cs">
                      <ul>
                        {this.state.xq.map((a) => {
                          return (
                            <li className="cs-item" key={a.key}>
                              <span className="cs-item1">{a.key}</span>
                              <span className="cs-item2">{a.value}</span>
                            </li>
                          );
                        })}
                      </ul>
                    </div>
                    <ul className="conts-rm">
                      {item.list &&
                        item.list.map((i) => {
                          return (
                            <li className="rm-item" key={i.item_id}>
                              <div className="rm-item-img">
                                <img src={i.image} alt="" />
                              </div>
                              <div className="rm-item-price">
                                <p className="rm-price1">{i.title}</p>
                                <p className="rm-price2">
                                  ￥<span>{i.discountPrice}</span>
                                </p>
                              </div>
                            </li>
                          );
                        })}
                    </ul>
                  </Tabs>
                </div>
                {/* 商品详情结束 */}
                {/* 加入购物车开始 */}
                <div
                  className="add-con"
                  style={{ display: this.state.isShow ? "block" : "none" }}
                >
                  <i
                    className="iconfont icon-cuowu cu"
                    onClick={this.hangdClick}
                  ></i>
                  <div className="add-con-title">
                    <img
                      src="https://s11.mogucdn.com/mlcdn/c45406/200509_6kji37jbfh0i9bd40je8jfcjj84f3_800x800.jpg_128x999.jpg"
                      alt=""
                    />
                    <div className="con-right">
                      <div className="con-right-top">
                        ￥<span>19.90</span>
                      </div>
                      <div className="con-right-center">库存4579</div>
                      <div className="con-right-foo">
                        请选择:<span>{this.state.names}</span>
                      </div>
                    </div>
                  </div>
                  <div className="add-con-con">
                    {item.skuInfo.props.map((v, i) => {
                      return (
                        <div className="add-con-color" key={i}>
                          <p>{v.label}</p>
                          <ul className="add-con-conbox">
                            {v.list.map((j) => {
                              return (
                                <li
                                  key={j.name}
                                  className={
                                    this.state.names === j.name ? "active" : ""
                                  }
                                  onClick={this.getColor}
                                  data-names={j.name}
                                >
                                  {j.name}
                                </li>
                              );
                            })}
                          </ul>
                        </div>
                      );
                    })}
                    <div className="add-con-num">
                      <p>数量</p>
                      <div className="number-calculator">
                        <i
                          className="iconfont icon-plus-minus"
                          onClick={this.subClick.bind(this, -1)}
                        ></i>
                        <span>{this.state.num}</span>
                        <i
                          className="iconfont icon-jia"
                          onClick={this.addClick.bind(this, 1)}
                        ></i>
                      </div>
                    </div>
                  </div>
                  <div className="add-con-btn" onClick={this.bctextClick}>
                    确定
                  </div>
                </div>
                {/* 加入购物车结束 */}
              </div>
            );
          })}
        </div>
        {/* 商品详情部分结束 */}
        {/* 底部开始 */}
        <div className="details-gwc">
          <div className="details-shop" onClick={this.goDp}>
            <i className="iconfont icon-shangcheng1"></i>
            <span>店铺</span>
          </div>
          <div className="details-service" onClick={this.goTalk}>
            <i className="iconfont icon-weixin2"></i>
            <span>客服</span>
          </div>
          <div onClick={this.collectClick} className="details-collect ">
            <i
              className={
                this.state.isCollect
                  ? "iconfont icon-xingxing isCollect"
                  : "iconfont icon-xingxing1"
              }
            ></i>
            <span>收藏</span>
          </div>
          <div className="details-add">
            <button onClick={this.hangdClick}>加入购物车</button>
          </div>
          <div className="details-buy" onClick={this.goBy}>
            立即购买
          </div>
        </div>
        {/* 底部结束 */}
        {/* 快捷导航开始 */}
        <div className="details-kj">
          <span>
            快捷
            <br />
            导航
          </span>
        </div>
        {/* 快捷导航结束 */}
      </div>
    );
  }
}
const mapStoreToPage = (state) => {
  return {
    tites: state.DetailReducer.tites,
    tabs: state.DetailReducer.tabs,
  };
};
export default connect(mapStoreToPage, null)(withRouter(NewDetail));
